<template>
  <div class="me-view-body" v-title :data-title="title">
    <el-container class="me-view-container">
      <el-main>
        <div class="me-view-card">
          <h1 class="me-view-title">{{ notice.ntitle }}</h1>
          <div class="me-view-author">
            <div style="display: inline-block">
              <a class="">
                <img class="me-view-picture" :src="notice.publisher.avatar" />
              </a>
              <div class="me-view-info">
                <span>
                  发布人：{{ notice.publisher.username }}
                  <el-tag type="primary">
                    {{ notice.publisherRole.role }}
                  </el-tag>
                </span>
                <div class="me-view-meta">
                  <span>{{ notice.updateTime }}</span>
                  <span>阅读 {{ notice.viewCounts }}</span>
                </div>
              </div>
            </div>
            <div style="display: inline-block; float: right">
              <a class="">
                <img class="me-view-picture" :src="notice.modifier.avatar" />
              </a>
              <div class="me-view-info">
                <span>
                  修改人: {{ notice.modifier.username }}
                  <el-tag type="success">
                    {{ notice.modifierRole.role }}
                  </el-tag>
                </span>
                <div class="me-view-meta">
                  <span>{{ notice.updateTime }}</span>
                  <span>阅读 {{ notice.viewCounts }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- markdown 内容 -->
          <div class="me-view-content">
            <div v-html="notice.ncontent"/>
          </div>

          <div class="me-view-end">
            <el-alert
              title="文章End..."
              type="success"
              center
              :closable="false"
            >
            </el-alert>
          </div>

          <div class="me-view-tag">
            公告分类：
            <!--<span style="font-weight: 600">{{notice.category.categoryName}}</span>-->
            <el-button
              @click="tagOrCategory('category', notice.category.id)"
              size="mini"
              type="primary"
              round
              plain
              >{{ notice.type === 0 ? "系统公告" : "招标公告" }}</el-button
            >
            <el-button
              @click="tagOrCategory('category', notice.category.id)"
              size="mini"
              type="danger"
              round
              plain
              >{{ notice.weight === 0 ? "非置顶公告" : "置顶公告" }}</el-button
            >
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import { getNoticeById } from "@/api/home";

export default {
  name: "NoticeView",
  created() {
    this.getNotice();
  },
  watch: {
    $route: "getNotice",
  },
  data() {
    return {
      notice: {
        id: "",
        publisher: {
          accountId: "",
          username: "",
          mobilePhone: "",
          avatar: "",
        },
        publisherRole: {
          id: "",
          role: "",
          description: "",
        },
        modifier: {
          accountId: "",
          username: "",
          mobilePhone: "",
          avatar: "",
        },
        modifierRole: {
          id: "",
          role: "",
          description: "",
        },
        createTime: "",
        updateTime: "",
        viewCounts: 10,
        type: 1,
        weight: 0,
        ncontent: "",
        ntitle: "",
      },
      comments: [],
      comment: {
        notice: {},
        content: "",
      },
    };
  },
  computed: {
    title() {
      return `${this.notice.ntitle} - 公告`;
    },
  },
  methods: {
    tagOrCategory(type, id) {
      this.$router.push({ path: `/${type}/${id}` });
    },
    getNotice() {
      let that = this;
      getNoticeById({id:that.$route.params.id})
        .then((data) => {
          Object.assign(that.notice, data.data);
        })
        .catch((error) => {
          if (error !== "error") {
            that.$message({
              type: "error",
              message: "文章加载失败",
              showClose: true,
            });
          }
        });
    },
  },
};
</script>

<style>
.me-view-body {
  margin: 100px auto 140px;
}

.me-view-container {
  width: 800px;
}

.el-main {
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
}

.me-view-end {
  margin-top: 20px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 30px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}
</style>
